<template>
  <div class="page">
    <h4>默认使用</h4>
    <div class="item">
      <b-scroll
        height="300px"
        track-color="red"
        thumb-color="green"
        round
        @wheel="handleWheel"
        @moving="handleMoving"
        @moveStart="handleMoveStart"
        @moveEnd="handleMoveEnd"
      >
        <ul>
          <li v-for="(item, index) in count" :key="index">{{ item }}</li>
        </ul>
      </b-scroll>
      <div class="scroll">
        <p>wheel:{{scrollDistance}}</p>
        <p>mousemove:{{scrollDistance}}</p>
      </div>
    </div>
    <h4>两种主题</h4>
    <div class="item flex">
      <div class="left">
        <h4>light</h4>
        <b-scroll height="300px">
          <ul>
            <li v-for="(item, index) in count" :key="index">{{ item }}</li>
          </ul>
        </b-scroll>
      </div>
      <div class="right">
        <h4>dark</h4>
        <b-scroll
          height="300px"
          theme="dark"
          class="dark"
          @pullingUp="pullingUp"
        >
          <ul>
            <li v-for="(item, index) in count" :key="index">{{ item }}</li>
          </ul>
        </b-scroll>
      </div>
    </div>

    <h4>无限滚动</h4>
    <div class="item">
      <b-scroll height="300px" @pullingUp="handlePullingUp" ref="scroll1">
        <ul>
          <li v-for="(item, index) in count2" :key="index">{{ item }}</li>
        </ul>
      </b-scroll>
    </div>

    <h4>配合外部组件使用</h4>
    <div class="item">
      <b-scroll height="300px" ref="scroll" :is-disable="isDisable">
        <ul>
          <li v-for="(item, index) in count" :key="index">{{ item }}</li>
        </ul>
      </b-scroll>
      <div class="button">
        <b-button type="primary" @click="handleClick">滚动到</b-button>
        <b-switch v-model="isDisable" size="large">
          <span slot="open">禁用</span>
          <span slot="close">开启</span>
        </b-switch>
      </div>
    </div>
    <h4>内部不大于高度无法滚动</h4>
    <div class="test">
      <b-scroll class="scroll" :speed="1">
        <img src="../assets/img/swiper/swiper1.png" alt />
        <img src="../assets/img/swiper/swiper1.png" alt />
        <img src="../assets/img/swiper/swiper1.png" alt />
        <img src="../assets/img/swiper/swiper1.png" alt />
        <img src="../assets/img/swiper/swiper1.png" alt />
        <img src="../assets/img/swiper/swiper1.png" alt />
        <img src="../assets/img/swiper/swiper1.png" alt />
        <img src="../assets/img/swiper/swiper1.png" alt />
        <img src="../assets/img/swiper/swiper1.png" alt />
      </b-scroll>
    </div>
  </div>
</template>
<script>
export default {
  name: "ScrollPage",
  data() {
    return {
      count: 40,
      count2: 40,
      isDisable: false,
      scrollY: 0,
      scrollDistance: 0,
    };
  },
  methods: {
    pullingUp() {
      console.log("pulling-up");
    },
    handlePullingUp() {
      console.log('pulling-up');
      this.count2 += 10;
    },
    handleClick() {
      this.scrollY += 30;
      this.$refs.scroll.scrollTo(-this.scrollY, 0.4);
    },
    handleWheel(y) {
      console.log(y);
      this.scrollDistance = y;
    },
    handleMoving(y) {
      console.log("moving:" + y);
      this.scrollDistance = y;
    },
    handleMoveStart(y) {
      console.log("move start:" + y);
    },
    handleMoveEnd(y) {
      console.log("move end:" + y);
    },
  },
};
</script>
<style scoped>
.page {
  padding: 15px 0px;
}
.item {
  border: 1px solid red;
}
.flex {
  display: flex;
}
.left,
.right {
  flex: 1;
}
.button {
  text-align: center;
}
h4 {
  padding: 5px 0px;
  text-align: center;
  margin: 15px 0px;
}
li {
  border: 1px solid var(--border);
  margin: 0px 0px 10px 0px;
  text-align: center;
  font-size: 18px;
}
.dark {
  background: black;
  color: #fff;
  margin-left: 20px;
}
.dark li {
  border: 1px solid var(--border-tint);
}
.test {
  height: 600px;
  border: 1px solid black;
  padding: 0px 40px;
}
.scroll {
  height: 100%;
  border: 1px solid red;
}
</style>